<template>
  <div class="certificate-container">
    <div class="left">
      <div
        class="certificate-img"
        :style="{
          backgroundImage: `url(${certificateList[certificateIndex].url})`,
        }"
      ></div>
    </div>
    <div class="right">
      <div
        class="certificate-item"
        :class="{ active: certificateIndex === index }"
        @click="handleClick(index)"
        v-for="(item, index) in certificateList"
        :key="index"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { getAssetsFile } from "@/utils/util";

const certificateIndex = ref(0);
const certificateList = ref<any[]>([
  {
    title: "Front End Development Libraries",
    url: getAssetsFile("images/front-development.jpg"),
  },
  {
    title: "Harmony0S应用开发者高级认证",
    url: getAssetsFile("images/advanced-certifications.jpg"),
  },
  {
    title: "Responsive Web Design",
    url: getAssetsFile("images/web-design.jpg"),
  },
  {
    title: "JavaScript Algorithms and DataStructures",
    url: getAssetsFile("images/js-data-structures.jpg"),
  },
  {
    title: "Harmony0S应用开发者基础认证",
    url: getAssetsFile("images/foundation-ertification.jpg"),
  },
]);
const handleClick = (index: number) => {
  certificateIndex.value = index;
};
</script>
<style scoped lang="scss">
.active {
  color: #5b39c9;
}

.certificate-container {
  width: 100%;
  height: 600px;
  display: flex;

  .left {
    width: 50%;
    height: 100%;
    padding: 50px;

    .certificate-img {
      height: 100%;
      transition: all 0.5s;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .right {
    width: 50%;
    height: 100%;
    padding-left: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background: #f9f9f9;

    .certificate-item {
      font-family: "宋体", serif;
      cursor: pointer;
      width: auto;
      transition: all 0.5s;

      &:hover {
        color: #5b39c9;
      }
    }
  }
}
</style>
